<template>
  <el-card>
    <template #header>
      <h3 v-text="t('connection')"></h3>
    </template>
    
    <el-row :gutter="8" style="align-items: center;">
      <!-- 左侧连接配置区域 -->
      <el-col :span="13">
        <el-row :gutter="8" style="align-items: center;">
          <!-- Worker模式 -->
          <template v-if="connectionStore.isWorkerMode">
            <el-col :span="2" style="text-align: center;">ws://</el-col>
            <el-col :span="8">
              <el-input v-model="connectionStore.serverIp" :disabled="connectionStore.isConnected" :placeholder="t('ip_address')"></el-input>
            </el-col>
            <el-col :span="1" style="text-align: center;">:</el-col>
            <el-col :span="5">
              <el-input v-model="connectionStore.serverPort" :disabled="connectionStore.isConnected" :placeholder="t('port')"></el-input>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" @click="handleConnect" style="width: 100%;">
                {{ connectionStore.isConnected ? t('reconnect') : t('connect') }}
              </el-button>
            </el-col>
          </template>
          
          <!-- Bridge模式 -->
          <template v-else>
            <el-col :span="2" style="text-align: center;">ws://</el-col>
            <el-col :span="6">
              <el-input v-model="connectionStore.bridgeIp" :disabled="connectionStore.isConnected" :placeholder="t('ip_address')"></el-input>
            </el-col>
            <el-col :span="1" style="text-align: center;">:</el-col>
            <el-col :span="3">
              <el-input v-model="connectionStore.bridgeUserPort" :disabled="connectionStore.isConnected" :placeholder="t('user_port')"></el-input>
            </el-col>
            <el-col :span="1" style="text-align: center;">&gt;&gt;</el-col>
            <el-col :span="3">
              <el-input v-model="connectionStore.bridgeConsolePort" :disabled="connectionStore.isConnected" :placeholder="t('console_port')"></el-input>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" @click="handleConnect" style="width: 100%;">
                {{ connectionStore.isConnected ? t('reconnect') : t('connect') }}
              </el-button>
            </el-col>
          </template>
        </el-row>
      </el-col>
      
      <!-- 右侧状态按钮区域 -->
      <el-col :span="11">
        <el-row :gutter="8">
          <el-col :span="3">
            <el-tooltip :content="connectionStore.connectionTooltip" placement="top">
              <el-button :type="connectionStore.connectionStatus" size="small" style="width: 100%;">C</el-button>
            </el-tooltip>
          </el-col>
          <el-col :span="3">
            <el-tooltip :content="connectionStore.busTooltip" placement="top">
              <el-button :type="connectionStore.busStatus" size="small" style="width: 100%;">B</el-button>
            </el-tooltip>
          </el-col>
          <el-col :span="3">
            <el-tooltip :content="connectionStore.videoTooltip" placement="top">
              <el-button :type="connectionStore.videoStatus" size="small" style="width: 100%;">V</el-button>
            </el-tooltip>
          </el-col>
          <el-col :span="3">
            <el-tooltip :content="connectionStore.audioTooltip" placement="top">
              <el-button :type="connectionStore.audioStatus" size="small" style="width: 100%;">A</el-button>
            </el-tooltip>
          </el-col>
          <el-col :span="3">
            <el-tooltip :content="connectionStore.signalTooltip" placement="top">
              <el-button :type="connectionStore.signalStatus" size="small" style="width: 100%;">S</el-button>
            </el-tooltip>
          </el-col>
          <el-col :span="3">
            <el-tooltip :content="connectionStore.sampleTooltip" placement="top">
              <el-button :type="connectionStore.sampleStatus" size="small" style="width: 100%;">S</el-button>
            </el-tooltip>
          </el-col>
          <el-col :span="3">
            <el-tooltip :content="connectionStore.pointCloudTooltip" placement="top">
              <el-button :type="connectionStore.pointCloudStatus" size="small" style="width: 100%;">P</el-button>
            </el-tooltip>
          </el-col>
          <el-col :span="3">
            <el-tooltip :content="connectionStore.functionTooltip" placement="top">
              <el-button :type="connectionStore.functionStatus" size="small" style="width: 100%;" @click="connectionStore.handleFunctionButtonClick">F</el-button>
            </el-tooltip>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { useConnectionStore } from '@/stores/connection'
import { useLanguageStore } from '@/stores/language'
import { onMounted } from 'vue'

const connectionStore = useConnectionStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'connection': {
      'en': 'Connection',
      'zh': '连接'
    },
    'connect': {
      'en': 'Connect',
      'zh': '连接'
    },
    'reconnect': {
      'en': 'Reconnect',
      'zh': '重连'
    },
    'connection_status': {
      'en': 'Connection Status',
      'zh': '连接状态'
    },
    'bus_status': {
      'en': 'Bus Data Status',
      'zh': '总线数据状态'
    },
    'video_status': {
      'en': 'Video Data Status',
      'zh': '视频数据状态'
    },
    'audio_status': {
      'en': 'Audio Data Status',
      'zh': '音频数据状态'
    },
    'signal_status': {
      'en': 'Signal Data Status',
      'zh': '信号数据状态'
    },
    'sample_status': {
      'en': 'Sample Data Status',
      'zh': '采样数据状态'
    },
    'point_cloud_status': {
      'en': 'Point Cloud Data Status',
      'zh': '点云数据状态'
    },
    'function_status': {
      'en': 'Function Data Status',
      'zh': '功能数据状态'
    },
    'ip_address': {
      'en': 'IP Address',
      'zh': 'IP地址'
    },
    'port': {
      'en': 'Port',
      'zh': '端口'
    },
    'user_port': {
      'en': 'User Port',
      'zh': '用户端口'
    },
    'console_port': {
      'en': 'Console Port',
      'zh': '控制台端口'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}

// 处理连接
const handleConnect = async () => {
  if (connectionStore.isWorkerMode) {
    const { serverIp, serverPort } = connectionStore
    if (!serverIp || !serverPort) {
      return
    }
    
    // 保存配置到localStorage
    localStorage.setItem("AppoxJsTest.ConnectionIp", serverIp)
    localStorage.setItem("AppoxJsTest.ConnectionPort", serverPort)
  } else {
    const { bridgeIp, bridgeUserPort, bridgeConsolePort } = connectionStore
    if (!bridgeIp || !bridgeUserPort || !bridgeConsolePort) {
      return
    }
    
    // 保存配置到localStorage
    localStorage.setItem("AppoxJsTest.ConnectionBridgeIp", bridgeIp)
    localStorage.setItem("AppoxJsTest.ConnectionBridgebridgeUserPort", bridgeUserPort)
    localStorage.setItem("AppoxJsTest.ConnectionBridgebridgeConsolePort", bridgeConsolePort)
  }
  
  await connectionStore.connect()
}

// 初始化时从localStorage加载配置
onMounted(() => {
  if (connectionStore.isWorkerMode) {
    const savedIp = localStorage.getItem("AppoxJsTest.ConnectionIp")
    const savedPort = localStorage.getItem("AppoxJsTest.ConnectionPort")
    if (savedIp) connectionStore.serverIp = savedIp
    if (savedPort) connectionStore.serverPort = savedPort
  } else {
    const savedBridgeIp = localStorage.getItem("AppoxJsTest.ConnectionBridgeIp")
    const savedbridgeUserPort = localStorage.getItem("AppoxJsTest.ConnectionBridgebridgeUserPort")
    const savedbridgeConsolePort = localStorage.getItem("AppoxJsTest.ConnectionBridgebridgeConsolePort")
    if (savedBridgeIp) connectionStore.bridgeIp = savedBridgeIp
    if (savedbridgeUserPort) connectionStore.bridgeUserPort = savedbridgeUserPort
    if (savedbridgeConsolePort) connectionStore.bridgeConsolePort = savedbridgeConsolePort
  }
})
</script>